<template>
	<view class="page">
		
		<view class="product" v-for="(goodsData,index) in listData " :key="index">
			<view class="product-img">
				<image src="http://www.muhuashi.net/Public/images/gd/shopHomeTop/5d67b1ce61d4f.png?s=b" mode=""></image>
				<view class="product-img-bottom flex">
					<view class="price">
						公布结果：20154764541
					</view>
					<view class="status">
						2019-10-10 10:22:33
					</view>
				</view>
				<view class="full" v-if="false">即将开始</view>
			</view>
			<view class="descript">
				<view class="name text_over">【进口白咖啡】经典口味，口感醇厚 金爸爸经典10条装</view>
				<view class="price">
					￥{{goodsData.shop_price}} <text class="p">￥{{goodsData.market_price}}</text>
					<view class="btn" style="background: #ccc;">已结束</view>
				</view>
			</view>
		</view>
		<load-more :listnull="listnull" :loadtype="loadtype" :text2="defalutText" ref="loadmore">
			<block slot="null">
				<view :style="{'height':bodyHeight+'px'}">
					<defalut type="11" :text="defalutText" mt="10"></defalut>
				</view>
			</block>
		</load-more>
			
	
	</view>
</template>
<script>
	var that;
	import popOut from '@/components/pop-out.vue'
	import loadMore from '@/components/load-more.vue';
	import defalut from '@/components/defalut.vue'
	import {pageLoad} from '@/utils/request.js';
	export default {
		data() {
			return {
				page:1,
				listData:[],
				loadtype:0,
				listnull:false,
				showCategoryIndex:0,
				headerPosition:"fixed",
				//分类列表
				categoryList:[],
				iconsimg:"/static/img/com.cn.png",
				// 半价购
				goodsData:{goods_name:'',goods_desc:'',goods_brief:'',shop_price:'1','market_price':'8888'},
				defalutText:"没有更多了",
				bodyHeight:""
			}
		},
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			if(e.scrollTop>=0){
				this.headerPosition = "fixed";
			}else{
				this.headerPosition = "absolute";
			}
		},
		onLoad() {
			that=this;
			// this.getCategoryList()
			this.getHalfGoodsList(true)
			var winHeight=this.$store.state.winHeight;
			that.bodyHeight=winHeight-200;
		},
		onShow(){
		},
		onReady() {
		},
		methods: {
			/* 半价购 */
			getHalfGoodsList(isReload){
				pageLoad({
					url:"/goods/goodsList",
					that: that,
					isReload: isReload,
					emptyList:false,
					data:{
						is_recommend:1
					},
					before(res){
						res.data.length = 9
					},
					success(res){
						res.data.forEach((item)=>{
							item.loaded = false
						})
						uni.stopPullDownRefresh();
					}
				})
			},
			/* 分类 */
			getCategoryList(){
				this.$https.POST({
					url:'/goods/goodsCategory',
					data:{},
					success(res){
						// console.log(res)
						that.categoryList=res.data;
						uni.stopPullDownRefresh();
					}
				})
			},
			//分类切换显示
			showCategory(index){
				this.showCategoryIndex = index;
			},
			toCategory(e){
				uni.setStorageSync('catName',e.name);
				uni.navigateTo({
					url: '../../goods/goods-list/goods-list?cid='+e.id+'&name='+e.name
				});
			},
			//搜索跳转
			toSearch() {
				uni.navigateTo({
					url:"/pages/tabBar/home/search/search"
				})
			},
			errimg(e){
				let index = e.target.dataset.errindex
				// let errimg = "/static/img/category/banner.jpg";
				// this.categoryList[index].banner_img = errimg;
			}
		},
		onReachBottom() {
			this.getHalfGoodsList(false)
		},
		components:{
			popOut,
			loadMore,
			defalut
		}
	}
</script>
<style lang="scss">
	.page{
		background: #f5f5f5;width: 100%;
	}
	/* 半价购 */
	.nav{
		font-size: 16px;height: 44px;line-height: 44px;text-align: center;background: #fff;position: fixed;top: 0;left: 0;width: 100%;background: #fff;z-index: 2;
		.icon-help{
			position: absolute;font-size: 40upx;padding: 0 30upx;right:0;top: 0;
		}
	}
	.tag{justify-content: space-around;line-height: 80upx;color: $maincolor;background: #fff;}
	.product{
		padding: 30upx;background: #fff;margin-top:20upx;border-bottom: 1px solid #efefef;
		.product-img{
			position: relative;
			image{width:100% ;height: 340upx;}
			&-bottom{
				justify-content: space-between;color: #fff;padding:0 20upx ;box-sizing: border-box;
				position: absolute;bottom: 0;left: 0;height: 60upx;line-height: 60upx;background:rgba(0, 0, 0, 0.5);
			}
		}
		.descript{
			.name{line-height: 70upx;color: #333;font-size: 28upx;}
			.price {
				font-size: 46upx;
				font-weight: bold;
				color: $maincolor;
				position: relative;
				.p{
					color: #999;position: relative;font-size: 26upx;margin-left: 10upx;
					&::after{
						content: "";
						display: block;
						height: 1px;
						width: 105%;
						background: #807c87;
						position: absolute;
						top:50%;
						left: 0;
					}
				}
				.btn{position: absolute;right: 0;bottom:0;font-weight: normal;color: #fff;width: 150upx;border-radius: 30upx;height: 60upx;line-height: 60upx;background: $maincolor;text-align: center;}
			}
		}
	}

	
	
	
	/* 分类 */
	.status-bar {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		background-color: #fff;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height);//覆盖样式
		/*  #endif  */
		
	}

	.header{
		width: 100%;
		padding-left:4%;
		padding-right:4%;
		box-sizing: border-box;
		height: 90upx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: $maincolor;
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);
		/*  #endif  */
		
		.addr{
			width: 120upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			font-size: 28upx;
			.icon{
				height: 60upx; 
				margin-right: 5upx;
				display: flex;
				align-items: center;
				font-size: 42upx;
				color: #ffc50a;
			}
		}
		.input-box{
			width: 100%;
			height: 66upx;
			background-color: #fff;
			border-radius: 35upx;
			position: relative;
			display: flex;
			align-items: center;
			.icon{
				display: flex;
				align-items: center;
				position: absolute;
				top:0;
				right: 0;
				width: 60upx;
				height: 66upx;
				font-size: 34upx;
				color: #c0c0c0;
			}
			input{
				padding-left: 28upx;
				height: 28upx;
				font-size: 28upx;
			}
		}
		.icon-btn {
			width: 130upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			image{width: 46upx;height: 46upx;padding:4px 36upx;}
		}
	}
	.place{
		
		background-color: #ffffff;
		height: 90upx;
		/*  #ifdef  APP-PLUS  */
		margin-top: var(--status-bar-height);
		/*  #endif  */
	}
	.category-list{
		width: 100%;
		background-color: #fff;
		display: flex;
		.left,.right{
			position: absolute;
			
			top: 90upx;
			/*  #ifdef  APP-PLUS  */
			top: calc(90upx + var(--status-bar-height));
			/*  #endif  */
			bottom: 0upx;
		}
		.left{
			// width: 24%;
			width: 180upx;
			left: 0upx;
			background-color: #f2f2f2;
			.row{
				width: 100%;
				height: 90upx;
				display: flex;
				align-items: center;
				.text{
					width: 100%;
					position: relative;
					font-size: 28upx;
					display: flex;
					justify-content: center;
					color: #3c3c3c;
					.block{
						position: absolute;
						width: 0upx;
						left: 0;
					}
				}
				&.on{
					height: 100upx;
					background-color: #fff;
					.text{
						font-size: 30upx;
						font-weight: 600;
						line-height: 60upx;
						color: #2d2d2d;
						.block{
							width: 6upx;
							height: 80%;
							top: 10%;
							background-color: $maincolor;
						}
					}
				}
			}
		}
		.right{
		   // width: 76%;
			// left: 24%;
			width:570upx;
			left:180upx;
			.category{
				width: 536upx;
				padding: 20upx 17upx;
				.banner{
					width: 536upx;
					height: 182upx;
					border-radius: 10upx;
					overflow: hidden;
					image{
						width: 536upx;
						height: 182upx;
					}
				}
				.list{
					margin-top: 40upx;
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					.box{
						// width: calc(71.44vw / 3);
						width: 178upx;
						margin-bottom: 30upx;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-wrap: wrap;
						image{
							width: 106upx;
							height: 106upx;
						}
						.text{
							margin-top: 5upx;
							width: 100%;
							display: flex;
							justify-content: center;
							font-size: 26upx;
						}
					}
				}
			}
		}
	}

</style>
